import React from 'react';
import { Card, Empty, Button } from 'antd';
import {
  DragOutlined,
  ZoomInOutlined,
  ZoomOutOutlined,
  ColumnWidthOutlined,
} from '@ant-design/icons';

/**
 * 画布组件，用于展示和编辑页面内容
 * @returns Canvas组件
 */
const Canvas: React.FC = () => {
  return (
    <div className="canvas-container" style={{ height: '100%', position: 'relative' }}>
      {/* 工具栏 */}
      <div
        className="canvas-toolbar"
        style={{
          position: 'absolute',
          top: 0,
          left: 0,
          right: 0,
          padding: '8px',
          display: 'flex',
          justifyContent: 'space-between',
          background: '#fafafa',
          borderBottom: '1px solid #f0f0f0',
          zIndex: 10,
        }}
      >
        <div>
          <Button icon={<DragOutlined />} type="text" title="移动" />
          <Button icon={<ColumnWidthOutlined />} type="text" title="对齐" />
        </div>
        <div>
          <Button icon={<ZoomOutOutlined />} type="text" title="缩小" />
          <span style={{ padding: '0 8px' }}>100%</span>
          <Button icon={<ZoomInOutlined />} type="text" title="放大" />
        </div>
      </div>

      {/* 画布区域 */}
      <div
        className="canvas-work-area"
        style={{
          padding: '60px 20px 20px',
          height: '100%',
          overflow: 'auto',
          display: 'flex',
          justifyContent: 'center',
          background: '#f5f5f5',
        }}
      >
        <Card
          style={{
            width: 375,
            minHeight: 667,
            boxShadow: '0 2px 8px rgba(0,0,0,0.15)',
            background: '#fff',
          }}
        >
          {/* 画布内容为空时显示提示 */}
          <div
            style={{
              height: '100%',
              minHeight: 600,
              display: 'flex',
              justifyContent: 'center',
              alignItems: 'center',
            }}
          >
            <Empty description="拖拽组件到这里开始设计" image={Empty.PRESENTED_IMAGE_SIMPLE} />
          </div>

          {/* 这里将来会渲染实际拖入的组件 */}
          <div id="canvas-drop-area"></div>
        </Card>
      </div>
    </div>
  );
};

export default Canvas;
